import { globalStyle, style } from '@vanilla-extract/css';
import { vars } from '../../theme/vars.css';

export const ROLLER_OPTION_LINE_HEIGHT = 2.6;

export const rollerStyle = style({
	display: 'flex',
	flexDirection: 'column',
	alignItems: 'stretch',
	position: 'relative',
	userSelect: 'none',
	height: `${ROLLER_OPTION_LINE_HEIGHT * 5}em`,
	background: vars.color.panelBackground,
});

globalStyle(`${rollerStyle}>div.mask`, {
	position: 'absolute',
	left: 0,
	top: 0,
	right: 0,
	bottom: 0,
	zIndex: 2,
	background: `linear-gradient(${vars.color.panelBackground}, transparent, ${vars.color.panelBackground})`,
});

globalStyle(`${rollerStyle}>div.line`, {
	position: 'absolute',
	left: 0,
	right: 0,
	height: `${ROLLER_OPTION_LINE_HEIGHT}em`,
	zIndex: 0,
	backgroundColor: vars.color.windowBackground,
	borderBottom: `1px solid ${vars.color.border}`,
});

globalStyle(`${rollerStyle}>div.options`, {
	display: 'flex',
	flexDirection: 'column',
	alignItems: 'stretch',
	flex: 1,
	overflowX: 'hidden',
	overflowY: 'scroll',
	zIndex: 1,
});

globalStyle(`${rollerStyle}>div.options>div`, {
	flexShrink: 0,
	display: 'flex',
	alignItems: 'center',
	justifyContent: 'center',
	height: `${ROLLER_OPTION_LINE_HEIGHT}em`,
	textAlign: 'center',
	// lineHeight: `${ROLLER_OPTION_LINE_HEIGHT}em`,
	whiteSpace: 'nowrap',
	overflow: 'hidden',
});
